<template>
  <div class="tools f column aic jcc relative">
    <div class="tools-item text-center f12" @click="checkChapter">
      <img src="@/assets/images/chapter.png" alt="" />
      <div class="mt5">章节</div>
    </div>
    <div class="tools-item text-center f12">
      <img src="@/assets/images/FAQ.png" alt="" />
      <div class="mt5">问答</div>
    </div>
    <div class="tools-item text-center f12">
      <img src="@/assets/images/download.png" alt="" />
      <div class="mt5">课件</div>
    </div>
    <div class="tools-item text-center f12">
      <img src="@/assets/images/practice.png" alt="" />
      <div class="mt5">练习</div>
    </div>


  </div>
</template>

<script setup lang="ts">
let dialogVisible = ref(false);

const checkChapter = () => {
  console.log(dialogVisible.value);
  dialogVisible.value = !dialogVisible.value;
};
</script>
<style lang="scss" scoped>
.tools {
  width: 62px;
  flex-shrink: 0;
  .tools-item {
    color: #747477;
    padding: 13px 0;
    margin: 5px 0;
    width: 100%;
    cursor: pointer;
  }
}


@keyframes modal-box {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-in-enter-active {
  animation: fadeIn 0.5s;
}
.fade-in-leave-active {
  animation: fadeOut 0.5s;
}
</style>
